<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>自由行-游记</title>
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<link rel="stylesheet" href="css/swiper.min.css">
	<link rel="stylesheet" href="css/top.css">
	<link rel="stylesheet" href="css/font.css">
	<link rel="stylesheet" href="css/fot.css">
	<link rel="stylesheet" href="css/tra.css">
	<link rel="stylesheet" href="css/travels.css">
</head>
<body>

<div id="wrap">
	<div id="top-fixed">
		<div id="top" class="top">
            <span class="posi-re">中国联通
            	<i class="posi-ab">4G</i>
            	<i class="icon iconfont icon-xinhao"></i>
            </span>
			<time class="top-time">00:00</time>
            <span>100%<i class="icon iconfont">&#xe697;</i></span>
		</div>
	</div>
	
	<div class="banner">
		<div class="logo">
			<img src="images/logo.png" alt="">
		</div>
		<h1 class="title">自由行游记</h1>
    	<div class="swiper-pagination"></div>
    	<a href="#" class="link-pagination">写游记</a>
	</div>


	<div class="swiper-container">
		<div class="swiper-wrapper">
			<div class="swiper-slide">
				<ul class="list">
					<li class="list-box">
						<a href="#">
							<h3 class="title">没事千万“家”，想到你来川渝吃遍“家”</h3>
							<div class="bg">
								<img src="images/li-msh.jpg" alt="">
							</div>
							<div class="list-txt">
								<p>lim 请不要在半夜或者饿的时候看，那肯定会把那对天发的誓抛之脑后，又去下载外卖软件，或者马上订机票的来 成都 、来 重庆 ！ 来川渝生活之前，对它们的印象仅留于....</p>
								<span>28616浏览</span>
								<span class="comment"><i class="icon iconfont">&#xe609;</i>评论</span>
							</div>
						</a>
						<form action="" method="post">
							<input type="text" name="user" class="ipt-txt" placeholder="请输入内容">
							<button type="submit" class="icon iconfont pl">&#xe628;</button>
						</form>
					</li>
					<li class="list-box">
						<a href="#">
							<h3 class="title">第一次去成都，市内7大经典景点。</h3>
							<div class="bg">
								<img src="images/li-msh1.jpg" alt="">
							</div>
							<div class="list-txt">
								<p>成都景点众多，光是玩转市内就已经令人眼花缭乱了，如何才能不虚成都之行？这里有一份成都市内七大必游景点榜单，兼顾传统体验和文艺探访，从熊猫宝宝到川蜀....</p>
								<span>1546浏览</span>
								<span class="comment"><i class="icon iconfont">&#xe609;</i>评论</span>
							</div>
						</a>
						<form action="" method="post">
							<input type="text" name="user" class="ipt-txt" placeholder="请输入内容">
							<button type="submit" class="icon iconfont pl">&#xe628;</button>
						</form>
					</li>
					<li class="list-box">
						<a href="#">
							<h3 class="title">老皇城VS新帝都，北京5日经典路线。</h3>
							<div class="bg">
								<img src="images/li-msh2.jpg" alt="">
							</div>
							<div class="list-txt">
								<p>经典5日线路，囊括了老北京的市井百态，新北京的时尚潮文化。</p>
								<span>981546浏览</span>
								<span class="comment"><i class="icon iconfont">&#xe609;</i>评论</span>
							</div>
						</a>
						<form action="" method="post">
							<input type="text" name="user" class="ipt-txt" placeholder="请输入内容">
							<button type="submit" class="icon iconfont pl">&#xe628;</button>
						</form>
					</li>
					<li class="list-box">
						<a href="#">
							<h3 class="title">为什么欧洲很多画作和雕塑都是裸体？</h3>
							<div class="bg">
								<img src="images/li-msh3.jpg" alt="">
							</div>
							<div class="list-txt">
								<p>简单来说，就是两个原因：欧洲很多美术作品的题材都是古希腊神话故事，古希腊众神本身就是裸体或半裸的。还有相当一部分美术作品是文艺复兴时期的，这部分作品有的取材于古希腊神话，</p>
								<span>5686浏览</span>
								<span class="comment"><i class="icon iconfont">&#xe609;</i>评论</span>
							</div>
						</a>
						<form action="" method="post">
							<input type="text" name="user" class="ipt-txt" placeholder="请输入内容">
							<button type="submit" class="icon iconfont pl">&#xe628;</button>
						</form>
					</li>
					<li class="list-box">
						<a href="#">
							<h3 class="title">没事千万“家”，想到你来川渝吃遍“家”</h3>
							<div class="bg">
								<img src="images/li-msh.jpg" alt="">
							</div>
							<div class="list-txt">
								<p>lim 请不要在半夜或者饿的时候看，那肯定会把那对天发的誓抛之脑后，又去下载外卖软件，或者马上订机票的来 成都 、来 重庆 ！ 来川渝生活之前，对它们的印象仅留于....</p>
								<span>28616浏览</span>
								<span class="comment"><i class="icon iconfont">&#xe609;</i>评论</span>
							</div>
						</a>
						<form action="" method="post">
							<input type="text" name="user" class="ipt-txt" placeholder="请输入内容">
							<button type="submit" class="icon iconfont pl">&#xe628;</button>
						</form>
					</li>
					<li class="list-box">
						<a href="#">
							<h3 class="title">第一次去成都，市内7大经典景点。</h3>
							<div class="bg">
								<img src="images/li-msh1.jpg" alt="">
							</div>
							<div class="list-txt">
								<p>成都景点众多，光是玩转市内就已经令人眼花缭乱了，如何才能不虚成都之行？这里有一份成都市内七大必游景点榜单，兼顾传统体验和文艺探访，从熊猫宝宝到川蜀....</p>
								<span>1546浏览</span>
								<span class="comment"><i class="icon iconfont">&#xe609;</i>评论</span>
							</div>
						</a>
						<form action="" method="post">
							<input type="text" name="user" class="ipt-txt" placeholder="请输入内容">
							<button type="submit" class="icon iconfont pl">&#xe628;</button>
						</form>
					</li>
				</ul>
			</div>
			<div class="swiper-slide swiper-block">
				<div class="Scenic">
			        <div class="personal">
			            <div class="box">
			                <img src="images/2.jpg" alt="">
			            </div>
			            <div class="sig">
			                <span>林中小路</span>
			                <span><em>28</em>篇游记，<em>60</em>粉丝</span>
			            </div>
			            <h3>迪士尼</h3>
			        </div>
			        <div class="trip">
			            <p>我的出行信息</p>
			            <div class="information">
			                <div class="personaldata">
			                    <p>
			                        <img src="images/1%20(30).jpg" alt="">
			                        出发时间 2019年-05-02
			                    </p>
			                    <p class="character">
			                        <img src="images/1%20(3).jpg" alt="">
			                        人物 情人/夫妻
			                    </p>
			                    <p>
			                        <img src="images/1%20(32).jpg" alt="">
			                        出行日期 7天
			                    </p>
			                </div>
			            </div>
			        </div>
			    </div>
			    <div class="jade">
			        <div class="pic jade-pic">
			            <img src="images/11.jpg" alt="">
			            <p><span>点击查看大图<i class="icon iconfont">&#xe636;</i></span></p>
			            <p class="rig">六大必玩项目（创极速光轮、飞越地平线、七个小矮人矿山车、 加勒比海 盗、小飞侠天空奇遇、雷鸣山漂流）逐一体验，排队最久的地平线也不过排了一个多小时，预留了足够的时间拍照，顺便还答了个美团的笔试题。<br/><br/>迪士尼门票分很多种，单日/双日/双次/半日（下午3点以后入园）/年卡等等，在携程飞猪之类的代理平台购买会便宜点（平日票360左右），标准票和成人票一样，一人可购多张，只需刷购买人的身份证即可入园</p>
			        </div>
			        <div class="jade-pic">
			            <img src="images/12.jpg" alt="">
			        </div>
			        <div class="Underline">
			           <div class="Underline2">
			               <p>本篇游记共含7682个文字，170张图片。</p>
			               <p>评论量：1854314.</p>
			           </div>
			        </div>
			    </div>
			</div>


		</div>
	</div>

	<div id="fot-nav">
		<nav>
			<ul class="list">
                <li>
                    <a href="index.html">
                        <i class="icon iconfont">&#xe61d;</i>
                        <span>首页</span>
                    </a>
                </li>
                <li>
                    <a href="scenic.html">
                        <i class="icon iconfont">&#xe61e;</i>
                        <span>景区介绍</span>
                    </a>
                </li>
                <li>
                    <a href="pict.html">
                        <i class="icon iconfont">&#xe636;</i>
                        <span>相册</span>
                    </a>
                </li>
                <li class="active">
                    <a href="travels.html">
                        <i class="icon iconfont">&#xe616;</i>
                        <span>游记</span>
                    </a>
                </li>
                <li>
                    <a href="equipment.html">
                        <i class="icon iconfont">&#xe617;</i>
                        <span>旅游装备</span>
                    </a>
                </li>
                <li>
                    <a href="Personal.html">
                        <i class="icon iconfont">&#xe60b;</i>
                        <span>个人中心</span>
                    </a>
                </li>
            </ul>
		</nav>
	</div>
</div>








<script src="js/swiper.min.js"></script>
<script src="js/script.js"></script>
<script>
	var swiper = new Swiper('.swiper-container', {
	pagination: {
        el: '.swiper-pagination',
        clickable: true,
    	},
	});
	var spTxt = document.querySelectorAll(".swiper-pagination span")
	spTxt[0].innerText = "最近更新"
	spTxt[1].innerText = "日志之星"



	var comment = document.querySelectorAll(".comment");
	var commentBox = document.querySelectorAll(".list-box form");
	for(var i = 0;i<comment.length;i++){
		comment[i].index = i;
		comment[i].onclick=function (){
			if(commentBox[this.index].style.height == '2rem'){
				commentBox[this.index].style.height = '0';
				commentBox[this.index].style.borderBottom ="0";
			}else{
				for(var j = 0;j<comment.length;j++){
					commentBox[j].style.height = '0';
					commentBox[j].style.borderBottom ="0";
				}
				commentBox[this.index].style.height = '2rem';
				commentBox[this.index].style.borderBottom ="1px solid #Ed9613";
			}
		}
	}
</script>
</body>
</html>